<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    @@include('./include/header.html')
    <title> 我要订货 </title>
    <link href="../assets/js/Swiper-4.0.7/swiper.min.css" rel="stylesheet">
    <style>
        .weui-tab__bd .weui-cells:first-child {
            margin-top: 0;
        }

        .weui-btn_primary:not(.weui-btn_disabled):active {
            opacity: 1
        }
    </style>
</head>

<body>
    <div class="page">
        <div class="page-hd">
            @@include('./include/page-hd.html', { "title": "我要订货", "menu": "" })
        </div>

        <div class="page-bd" style="background:#f0f5f1;">
            <!-- 页面内容-->
            <div class="weui-tab">
                <div class="swiper-container small_swiper">
                    <div class="swiper-wrapper weui-navbar">
                        <div class="swiper-slide weui-navbar__item weui-bar__item--on">运动休闲</div>
                        <div class="swiper-slide weui-navbar__item">医药保健</div>
                        <div class="swiper-slide weui-navbar__item">手机数码</div>
                        <div class="swiper-slide weui-navbar__item">鞋箱</div>
                        <div class="swiper-slide weui-navbar__item">运动休闲</div>
                        <div class="swiper-slide weui-navbar__item">医药保健</div>
                        <div class="swiper-slide weui-navbar__item">鞋箱</div>
                    </div>
                    <div class="swiper_more open-popup" data-target="#popup_list">
                        <img src="../assets/images/icon_menu.png" class="icon_menu" />
                    </div>
                </div>
                
                <div class="weui-tab__bd" style="height:auto;position:absolute;top:50px;left:0;right:0;bottom:0;">
                    <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
                        <div class="weui-cell" style="padding-top:6px">
                            <div class="weui-cell__hd">
                                <div class="weui-cell__cat">
                                    <img src="../assets/images/icon_car.png" alt="" />
                                    <span class="weui-badge" style="position: absolute;top: 0;right: 0;">8</span>
                                </div>
                            </div>
                            <div class="weui-cell__bd">
                                <div class="weui-flex search-flex">
                                    <div class="weui-flex__search">
                                        <img src="../assets/images/icon_search.png" alt="" />
                                    </div>
                                    <div class="weui-flex__item">
                                        <input class="weui-input" type="text" placeholder="请输入商品名称搜索" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="weui-grids small-grids border-none">
                            <div class="small-grid">
                                <div class="pro-grid">
                                    <div class="pro-grid_title">NIKE耐克新款耐克新款耐克新款</div>
                                    <a href="商品详情.html" class="pro-grid_link">
                                        <img src="../assets/images/rwm.png" alt="" />
                                    </a>
                                    <div class="weui-flex">
                                        <div class="weui-flex__item">￥
                                            <span>869</span>
                                        </div>
                                        <div class="weui-flex__ft">总代:88</div>
                                    </div>
                                    <div class="small_position">
                                        <div class="count small_plus">
                                            <a class="count_btn count_plus"></a>
                                        </div>
                                        <div class="count small_count" style="display:none;">
                                            <a class="count_btn count_minus "></a>
                                            <input class="count_number" type="number" value="1">
                                            <a class="count_btn count_plus"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="small-grid">
                                <div class="pro-grid">
                                    <div class="pro-grid_title">NIKE耐克新款</div>
                                    <a href="#" class="pro-grid_link">
                                        <img src="../assets/images/proimg1x1.png" alt="" />
                                    </a>
                                    <div class="weui-flex">
                                        <div class="weui-flex__item">￥
                                            <span>869</span>
                                        </div>
                                        <div class="weui-flex__ft">总代:88</div>
                                    </div>
                                    <div class="small_position">
                                        <div class="count small_plus">
                                            <a class="count_btn count_plus"></a>
                                        </div>
                                        <div class="count small_count" style="display:none;">
                                            <a class="count_btn count_minus "></a>
                                            <input class="count_number" type="number" value="1">
                                            <a class="count_btn count_plus"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="small-grid">
                                <div class="pro-grid">
                                    <div class="pro-grid_title">NIKE耐克新款</div>
                                    <a href="#" class="pro-grid_link">
                                        <img src="../assets/images/proimg1x1.png" alt="" />
                                    </a>
                                    <div class="weui-flex">
                                        <div class="weui-flex__item">￥
                                            <span>869</span>
                                        </div>
                                        <div class="weui-flex__ft">总代:88</div>
                                    </div>
                                    <div class="small_position">
                                        <div class="count small_plus">
                                            <a class="count_btn count_plus"></a>
                                        </div>
                                        <div class="count small_count" style="display:none;">
                                            <a class="count_btn count_minus "></a>
                                            <input class="count_number" type="number" value="1">
                                            <a class="count_btn count_plus"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="small-grid">
                                <div class="pro-grid">
                                    <div class="pro-grid_title">NIKE耐克新款</div>
                                    <a href="#" class="pro-grid_link">
                                        <img src="../assets/images/proimg1x1.png" alt="" />
                                    </a>
                                    <div class="weui-flex">
                                        <div class="weui-flex__item">￥
                                            <span>869</span>
                                        </div>
                                        <div class="weui-flex__ft">总代:88</div>
                                    </div>
                                    <div class="small_position">
                                        <div class="count small_plus">
                                            <a class="count_btn count_plus"></a>
                                        </div>
                                        <div class="count small_count" style="display:none;">
                                            <a class="count_btn count_minus "></a>
                                            <input class="count_number" type="number" value="1">
                                            <a class="count_btn count_plus"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="tab2" class="weui-tab__bd-item">
                        <h2>222</h2>
                    </div>
                    <div id="tab3" class="weui-tab__bd-item">
                        <h2>333</h2>
                    </div>
                    <div id="tab4" class="weui-tab__bd-item">
                        <h2>444</h2>
                    </div>
                    <div id="tab5" class="weui-tab__bd-item">
                        <h2>555</h2>
                    </div>
                </div>
            </div>

        </div>
        @@include('./include/bottom-bar.html',{ "item1": "active", "item2": "", "item3": "", "item4": "" })
    </div>

    <!-- 规格 -->
    <div id="popup_cat" class="weui-popup__container popup-bottom">
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
            <div class="weui-cells buy-cells" style="padding-bottom:28px">
                <div class="weui-cell" style="padding-top:36px;">
                    <div class="weui-cell__hd" style="position:relative">
                        <div class="weui-top_icon1"></div>
                        <div class="weui-top_icon2"></div>
                        <img src="../assets/images/proimg1x1.png" class="hdpro_img" alt="" />
                    </div>
                    <div class="weui-cell__bd">
                        <div class="pro_title">
                            阿迪达斯男女 跑步鞋透气减震跑步鞋2018潮人必备新品跑步鞋透气减震跑步鞋2018潮人必备新品
                        </div>
                        <div class="weui-flex flex-center mt20">
                            <div class="weui-flex__item">
                                <span class="price">
                                    <span class="text-red">￥</span>
                                    <b>639.00</b>元</span>
                            </div>
                            <div class="text-muted fs20">总代：88</div>
                        </div>
                    </div>
                    <div class="close-popup" style="position:absolute;top:10px;right:20px;">
                        <img src="../assets/images/icon_close.png" class="close_icon" alt="" />
                    </div>
                </div>
                <div class="max-height">
                    <div class="weui-cell ptb0">
                        <div class="weui-cell__bd">
                            <div class="label_group">
                                <h3 class="label_tit">请选择颜色：</h3>
                                <div class="labels">
                                    <label>
                                        <input name="color" checked type="radio">
                                        <span>粉紫</span>
                                    </label>
                                    <label>
                                        <input name="color" type="radio">
                                        <span>深蓝</span>
                                    </label>
                                    <label>
                                        <input name="color" type="radio">
                                        <span>靛蓝</span>
                                    </label>
                                </div>
                            </div>
                            <div class="label_group">
                                <h3 class="label_tit">请选择尺码：</h3>
                                <div class="labels">
                                    <label>
                                        <input name="size" checked type="radio">
                                        <span>36</span>
                                    </label>
                                    <label>
                                        <input name="size" type="radio">
                                        <span>37</span>
                                    </label>
                                    <label>
                                        <input name="size" type="radio">
                                        <span>37</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="weui-cell" style="margin-top:-48px;z-index:111;position:relative;">
                <div class="weui-cell__bd">
                    <a class="weui-btn weui-btn_primary mt20" id="js_check" href="###">确定</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 类型选择 -->
    <div id="popup_list" class="weui-popup__container popup-bottom">
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
            <div class="weui-cells">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <span class="x_title">请选择</span>
                    </div>
                    <div class="weui-cell__ft close-popup">
                        <img src="../assets/images/icon_close.png" class="close_icon" alt="" />
                    </div>
                </div>
                <div class="weui-cell" style="padding:0;">
                    <div class="weui-cell__bd">
                        <div class="weui-grids list_grids">
                            <div class="weui-grid checked">
                                <div class="x_title">医药保健</div>
                            </div>
                            <div class="weui-grid">
                                <div class="x_title">医药保健</div>
                            </div>
                            <div class="weui-grid">
                                <div class="x_title">医药保健</div>
                            </div>
                            <div class="weui-grid">
                                <div class="x_title">医药保健</div>
                            </div>
                            <div class="weui-grid">
                                <div class="x_title">医药保健</div>
                            </div>
                            <div class="weui-grid">
                                <div class="x_title">医药保健</div>
                            </div>
                            <div class="weui-grid">
                                <div class="x_title">医药保健</div>
                            </div>
                            <div class="weui-grid">
                                <div class="x_title">医药保健</div>
                            </div>
                            <div class="weui-grid">
                                <div class="x_title">医药保健</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @@include('./include/footer.html')
    <script src="../assets/js/Swiper-4.0.7/swiper.min.js"></script>

    <script>
        $(function () {
            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 4,
                spaceBetween: 0,
            });
            //切换
            $(".weui-navbar").on("click", ".weui-navbar__item", function () {
                var _index = $(this).index();
                $(this).addClass("weui-bar__item--on").siblings().removeClass("weui-bar__item--on");
                $(".weui-tab__bd-item ").eq(_index).addClass("weui-tab__bd-item--active").siblings().removeClass("weui-tab__bd-item--active");
            })

            // small_plus
            $(".small_plus").on('click', function () {
                var thas = '';
                thas = $(this);
                $("#popup_cat").popup();

                $('#js_check').on("click", function () {
                    console.log(thas)
                    $.closePopup(); //关闭弹出
                    thas.hide().siblings().fadeIn(600); // 
                })
            })
            // js_check


        })

    </script>
</body>

</html>